import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sltchat/constant.dart';
import 'package:sltchat/page/chat/chat_logic.dart';
import 'package:sltchat/page/chat/chat_state.dart';

class ChatPage extends StatelessWidget {
  const ChatPage({super.key});

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<ChatLogic>();
    final state = logic.state;
    return Scaffold(
        backgroundColor: color_ededed,
        appBar: AppBar(
          centerTitle: true,
          title: const Text("聊天对象昵称",
              style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
          actions: [
            InkWell(
              onTap: () {
                state.chatList.clear();
              },
              child: const Padding(
                padding: EdgeInsets.all(8.0),
                child: Icon(Icons.cleaning_services),
              ),
            )
          ],
        ),
        body: Column(
          children: [
            Expanded(child: Obx(() {
              if (state.chatList.isEmpty) {
                return Center(
                    child: Text(
                  "暂未开始聊天",
                  style: TextStyle(color: color_999999),
                ));
              }
              return ListView.builder(
                controller: logic.scrollController,
                itemCount: state.chatList.length,
                itemBuilder: (BuildContext context, int index) {
                  ChatListBean bean = state.chatList[index];
                  if (bean.isMe) {
                    return Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 5, horizontal: 10),
                      child: Row(
                        children: [
                          const SizedBox(width: 50),
                          Expanded(
                            child: Align(
                                alignment: Alignment.centerRight,
                                child: Container(
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 10, vertical: 8),
                                    decoration: BoxDecoration(
                                        color: color_95ec69,
                                        borderRadius: BorderRadius.circular(5)),
                                    child: Text(
                                      bean.content,
                                      style: const TextStyle(
                                          fontWeight: FontWeight.w500),
                                    ))),
                          ),
                        ],
                      ),
                    );
                  } else {
                    return Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 5, horizontal: 10),
                      child: Row(
                        children: [
                          Expanded(
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: Container(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 10, vertical: 8),
                                  decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: BorderRadius.circular(5)),
                                  child: Text(
                                    bean.content,
                                    style: const TextStyle(
                                        fontWeight: FontWeight.w500),
                                  )),
                            ),
                          ),
                          const SizedBox(width: 50),
                        ],
                      ),
                    );
                  }
                },
              );
            })),
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(16),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.grey.withAlpha(20),
                        blurRadius: 5,
                        spreadRadius: 5)
                  ]),
              child: Row(
                children: [
                  Expanded(
                      child: TextField(
                          controller: logic.textFieldController,
                          onChanged: (t) {
                            state.text.value = t;
                          },
                          style: const TextStyle(fontSize: 14),
                          decoration: InputDecoration(
                              hintText: "发消息",
                              isCollapsed: true,
                              hintStyle:
                                  TextStyle(fontSize: 14, color: color_999999),
                              isDense: true,
                              border: InputBorder.none,
                              contentPadding: const EdgeInsets.symmetric(
                                  horizontal: 10, vertical: 10)))),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Obx(() {
                      if (state.text.isEmpty) {
                        return const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Icon(Icons.add_circle_outline),
                        );
                      } else {
                        return InkWell(
                            onTap: logic.send,
                            child: const Padding(
                                padding: EdgeInsets.all(8.0),
                                child: Icon(Icons.send)));
                      }
                    }),
                  )
                ],
              ),
            ),
          ],
        ));
  }
}
